<!DOCTYPE html>
<html class="client-nojs vector-feature-night-mode-disabled vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-sticky-header-enabled" lang="en" dir="ltr"><head>
<meta charset="UTF-8">
<title>Lightbox (JavaScript)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="canonical" href="https://en.wikipedia.org/wiki/Lightbox_(JavaScript)"> <link href="./mw/ext.cite.styles.css" rel="stylesheet" type="text/css">
<link href="./mw/skins.vector.icons.css" rel="stylesheet" type="text/css">
<link href="./mw/skins.vector.search.codex.styles.css" rel="stylesheet" type="text/css">
<link href="./mw/skins.vector.styles.css" rel="stylesheet" type="text/css">
<link href="./mw/user.styles.css" rel="stylesheet" type="text/css">
<meta name="ResourceLoaderDynamicStyles" content="">
<link rel="stylesheet" type="text/css" href="./mw/site.styles.css">
<link rel="stylesheet" type="text/css" href="./mw/noscript.css">
<link rel="stylesheet" type="text/css" href="./footer.css">
<link rel="stylesheet" type="text/css" href="./vector-2022.css">
</head>
<body class="skin--responsive skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-0 ns-subject page-Lightbox_JavaScript rootpage-Lightbox_JavaScript skin-vector-2022 action-view">
<div class="mw-page-container">
<div class="mw-page-container-inner">
<div class="mw-content-container">
<main id="content" class="mw-body">
<header class="mw-body-header vector-page-titlebar">
<h1 id="firstHeading" class="firstHeading mw-first-heading">
<span id="openzim-page-title" class="mw-page-title-main"><span class="mw-page-title-main">Lightbox (JavaScript)</span></span>
</h1>
</header>
<a id="top"></a>
<div id="bodyContent" class="vector-body ve-init-mw-desktopArticleTarget-targetContainer" aria-labelledby="firstHeading" data-mw-ve-target-container="">
<div id="mw-content-text" class="mw-body-content mw-content-ltr" lang="en" dir="ltr"><div class="mw-content-ltr mw-parser-output" lang="en" dir="ltr">
<p><b>Lightbox</b> is a <a href="JavaScript" title="JavaScript">JavaScript</a> library that displays images and videos by filling the screen, and dimming out the rest of the <a href="Web_page" title="Web page">web page</a>.<sup id="cite_ref-useit_1-0" class="reference"><a href="#cite_note-useit-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup>
</p><p>The original JavaScript library was written by Lokesh Dhakar.<sup id="cite_ref-2" class="reference"><a href="#cite_note-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup> The term Lightbox may also refer to other similar JavaScript libraries. The technique gained widespread popularity due to its simple and elegant style.
</p><p>The original Lightbox library used two JavaScript libraries, <a href="Prototype_Javascript_Framework" class="mw-redirect" title="Prototype Javascript Framework">Prototype Javascript Framework</a><sup id="cite_ref-Herrington_3-0" class="reference"><a href="#cite_note-Herrington-3"><span class="cite-bracket">[</span>3<span class="cite-bracket">]</span></a></sup> and <a href="Script.aculo.us" class="mw-redirect" title="Script.aculo.us">script.aculo.us</a>,<sup id="cite_ref-Schmitt_4-0" class="reference"><a href="#cite_note-Schmitt-4"><span class="cite-bracket">[</span>4<span class="cite-bracket">]</span></a></sup> for its animations and positioning. In April 2012, the <a href="Plug-in_(computing)" title="Plug-in (computing)">plugin</a> was rewritten for <a href="JQuery" title="JQuery">jQuery</a>.<sup id="cite_ref-5" class="reference"><a href="#cite_note-5"><span class="cite-bracket">[</span>5<span class="cite-bracket">]</span></a></sup> The open-source nature of Lightbox encouraged developers to modify and fork the code, resulting in plugins such as Colorbox, Magnific Popup, Slimbox or Thickbox.
</p><p>Lightbox scripts are dependent upon a browser's <a href="JavaScript" title="JavaScript">JavaScript</a> support.<sup id="cite_ref-Schmitt2_6-0" class="reference"><a href="#cite_note-Schmitt2-6"><span class="cite-bracket">[</span>6<span class="cite-bracket">]</span></a></sup> Browsers that do not load the script for whatever reason can instead simply load the image as a separate page load, losing the Lightbox effect but still retaining the ability to display the image.<sup id="cite_ref-Zervaas_7-0" class="reference"><a href="#cite_note-Zervaas-7"><span class="cite-bracket">[</span>7<span class="cite-bracket">]</span></a></sup>
</p>
<div class="mw-heading mw-heading2"><h2 id="References">References</h2></div>
<style data-mw-deduplicate="TemplateStyles:r1239543626">
/* start https://en.wikipedia.org/ */
.mw-parser-output .reflist{margin-bottom:0.5em;list-style-type:decimal}@media screen{.mw-parser-output .reflist{font-size:90%}}.mw-parser-output .reflist .references{font-size:100%;margin-bottom:0;list-style-type:inherit}.mw-parser-output .reflist-columns-2{column-width:30em}.mw-parser-output .reflist-columns-3{column-width:25em}.mw-parser-output .reflist-columns{margin-top:0.3em}.mw-parser-output .reflist-columns ol{margin-top:0}.mw-parser-output .reflist-columns li{page-break-inside:avoid;break-inside:avoid-column}.mw-parser-output .reflist-upper-alpha{list-style-type:upper-alpha}.mw-parser-output .reflist-upper-roman{list-style-type:upper-roman}.mw-parser-output .reflist-lower-alpha{list-style-type:lower-alpha}.mw-parser-output .reflist-lower-greek{list-style-type:lower-greek}.mw-parser-output .reflist-lower-roman{list-style-type:lower-roman}
/* end https://en.wikipedia.org/ */
</style><div class="reflist">
<div class="mw-references-wrap"><ol class="references">
<li id="cite_note-useit-1"><span class="mw-cite-backlink"><b><a href="#cite_ref-useit_1-0">^</a></b></span> <span class="reference-text"><style data-mw-deduplicate="TemplateStyles:r1238218222">
/* start https://en.wikipedia.org/ */
.mw-parser-output cite.citation{font-style:inherit;word-wrap:break-word}.mw-parser-output .citation q{quotes:"\"""\"""'""'"}.mw-parser-output .citation:target{background-color:rgba(0,127,255,0.133)}.mw-parser-output .id-lock-free.id-lock-free a{background:url("./mw/Lock-green.svg")right 0.1em center/9px no-repeat}.mw-parser-output .id-lock-limited.id-lock-limited a,.mw-parser-output .id-lock-registration.id-lock-registration a{background:url("./mw/Lock-gray-alt-2.svg")right 0.1em center/9px no-repeat}.mw-parser-output .id-lock-subscription.id-lock-subscription a{background:url("./mw/Lock-red-alt-2.svg")right 0.1em center/9px no-repeat}.mw-parser-output .cs1-ws-icon a{background:url("./mw/Wikisource-logo.svg")right 0.1em center/12px no-repeat}body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-free a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-limited a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-registration a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-subscription a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .cs1-ws-icon a{background-size:contain;padding:0 1em 0 0}.mw-parser-output .cs1-code{color:inherit;background:inherit;border:none;padding:inherit}.mw-parser-output .cs1-hidden-error{display:none;color:var(--color-error,#d33)}.mw-parser-output .cs1-visible-error{color:var(--color-error,#d33)}.mw-parser-output .cs1-maint{display:none;color:#085;margin-left:0.3em}.mw-parser-output .cs1-kern-left{padding-left:0.2em}.mw-parser-output .cs1-kern-right{padding-right:0.2em}.mw-parser-output .citation .mw-selflink{font-weight:inherit}@media screen{.mw-parser-output .cs1-format{font-size:95%}html.skin-theme-clientpref-night .mw-parser-output .cs1-maint{color:#18911f}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .cs1-maint{color:#18911f}}
/* end https://en.wikipedia.org/ */
</style><cite id="CITEREFJakob_Nielsen,_Alertbox" class="citation web cs1">Jakob Nielsen, Alertbox. <a rel="nofollow" class="external text" href="http://www.useit.com/alertbox/application-design.html">"10 Best Application UIs"</a>.</cite></span>
</li>
<li id="cite_note-2"><span class="mw-cite-backlink"><b><a href="#cite_ref-2">^</a></b></span> <span class="reference-text"><cite id="CITEREFDhakar" class="citation web cs1">Dhakar, Lokesh. <a rel="nofollow" class="external text" href="http://lokeshdhakar.com/projects/lightbox/">"Lightbox JS"</a><span class="reference-accessdate">. Retrieved <span class="nowrap">2012-12-17</span></span>.</cite></span>
</li>
<li id="cite_note-Herrington-3"><span class="mw-cite-backlink"><b><a href="#cite_ref-Herrington_3-0">^</a></b></span> <span class="reference-text"><cite id="CITEREFHerrington" class="citation web cs1">Herrington, Jack D. <a rel="nofollow" class="external text" href="http://www.ibm.com/developerworks/library/x-ajaxxml6/">"Ajax and XML: Ajax for lightboxes"</a>. <i>IBM DeveloperWorks</i><span class="reference-accessdate">. Retrieved <span class="nowrap">2008-05-21</span></span>.</cite></span>
</li>
<li id="cite_note-Schmitt-4"><span class="mw-cite-backlink"><b><a href="#cite_ref-Schmitt_4-0">^</a></b></span> <span class="reference-text"><cite id="CITEREFSchmitt2006" class="citation book cs1">Schmitt, Christopher (2006). <i>CSS Cookbook</i>. <a href="O'Reilly_Media" title="O'Reilly Media">O'Reilly</a>. p. 204. <a href="ISBN_(identifier)" class="mw-redirect" title="ISBN (identifier)">ISBN</a> <bdi>0-596-52741-1</bdi>.</cite></span>
</li>
<li id="cite_note-5"><span class="mw-cite-backlink"><b><a href="#cite_ref-5">^</a></b></span> <span class="reference-text"><cite id="CITEREFDhakar" class="citation web cs1">Dhakar, Lokesh. <a rel="nofollow" class="external text" href="http://lokeshdhakar.com/projects/lightbox2/">"Lightbox2"</a><span class="reference-accessdate">. Retrieved <span class="nowrap">2012-12-17</span></span>.</cite></span>
</li>
<li id="cite_note-Schmitt2-6"><span class="mw-cite-backlink"><b><a href="#cite_ref-Schmitt2_6-0">^</a></b></span> <span class="reference-text"><cite id="CITEREFSchmitt2006" class="citation book cs1">Schmitt, Christopher (2006). <i>CSS Cookbook</i>. <a href="O'Reilly_Media" title="O'Reilly Media">O'Reilly</a>. p. 207. <a href="ISBN_(identifier)" class="mw-redirect" title="ISBN (identifier)">ISBN</a> <bdi>0-596-52741-1</bdi>.</cite></span>
</li>
<li id="cite_note-Zervaas-7"><span class="mw-cite-backlink"><b><a href="#cite_ref-Zervaas_7-0">^</a></b></span> <span class="reference-text"><cite id="CITEREFZervaas2007" class="citation book cs1">Zervaas, Quentin (2007). <a rel="nofollow" class="external text" href="https://archive.org/details/practicalweb20ap0000zerv/page/423"><i>Practical Web 2.0 Applications with PHP</i></a>. Springer. pp. <a rel="nofollow" class="external text" href="https://archive.org/details/practicalweb20ap0000zerv/page/423">423</a>. <a href="ISBN_(identifier)" class="mw-redirect" title="ISBN (identifier)">ISBN</a> <bdi>1-59059-906-3</bdi>.</cite></span>
</li>
</ol></div></div>
<div class="mw-heading mw-heading2"><h2 id="External_links">External links</h2></div>
<ul><li><span class="noviewer" typeof="mw:File"></span> Media related to <a href="https://commons.wikimedia.org/wiki/Category:Lightbox_(JavaScript)" class="extiw external" title="commons:Category:Lightbox (JavaScript)">Lightbox (JavaScript)</a> at Wikimedia Commons</li></ul></div><!--htdig_noindex--><div><div class="zim-footer">
This article is issued from <a class="external text" title="Last edited on 2024-09-07" href="https://en.wikipedia.org/wiki/?title=Lightbox_(JavaScript)&oldid=1244434402">Wikipedia</a>. The text is available under <a class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.en">Creative Commons Attribution-Share Alike 4.0</a> unless otherwise noted. Additional terms may apply for the media files.
</div>
</div><!--/htdig_noindex--></div>
</div>
</main>
</div>
</div>
</div>
</body></html>